<template>
    <view class="container">
        <myNavigation ref="navBar"></myNavigation>
        <view class="opus_list">
            <block v-for="(          item, index          ) in          opusList          " :key="index">
                <view class="opus_item" @tap.stop="toOpusInfoPage(item)">
                    <image :src='item.imgSrc[0]' class="opus_img" mode="aspectFill" />
                    <view class="user_info">
                        <view class="profile_photo">
                            <image :src="item.profilePhoto" mode="aspectFill" />
                        </view>
                        <view class="username">{{ item.authorName }}</view>
                    </view>
                    <view class="opus_des">
                        {{ item.des }}
                    </view>
                    <view class="opus_data">
                        <view class="iconfont icon" :class="{ liking: item.isLiking }" :data-likes="item.likes"
                            :data-isLiking="item.isLiking" @tap.stop="liking(item)">
                            &nbsp;{{
                            item.likes
                            }}
                        </view>
                        <view class="opus_date">{{ item.date }}</view>
                    </view>
                </view>
            </block>
        </view>
    </view>
</template>

<script setup>
    import './opusList.scss'
    import { ref, onMounted, inject } from 'vue';
    import Taro, { useRouter } from "@tarojs/taro";
    import myNavigation from '../../../components/myNavigation.vue';

    // 注入配置
    const config = inject('config');
    const baseUrl = config.baseUrl; // 从全局配置中读取 baseUrl

    // 当前菜谱信息序列化(需要通过原菜谱的id查询数据,现在只是模拟)
    function menuInfoToJsonStr() {
        const menuInfoObj = menuInfo;
        // console.log(menuInfoObj);
        const menuInfoStr = encodeURIComponent(JSON.stringify(menuInfoObj));
        return menuInfoStr;
    }


    // 跳转作评详细页面
    const toOpusInfoPage = (item) => {
        Taro.navigateTo({
            url: `../opusInfo/opusInfo?recipeId=${recipeId}&opusId=${item.opusId}&userId=${item.userId}&curUserId=${userId}`
        });
    }

    // 点赞点击事件
    const liking = (item) => {

        if (item.isLiking) {
            item.likes = (+item.likes) - 1
            // 取消点赞
            Taro.request({
                url: `${baseUrl}/likes/removeLikes?userId=${userId}&opusId=${item.opusId}`,
                method: 'DELETE',
                header: {
                    'content-type': 'application/json' // 默认值
                },
            })
        } else {
            item.likes = (+item.likes) + 1
            Taro.request({
                url: `${baseUrl}/likes/addLikes?userId=${userId}&opusId=${item.opusId}`,
                method: 'POST',
                header: {
                    'content-type': 'application/json' // 默认值
                },
            })

        }
        item.isLiking = !item.isLiking
    }



    // 导航栏信息
    const navBar = ref(null);

    const navigationHome = () => {
        Taro.switchTab({
            url: '../../index/index',
        });
    };

    const setNavBar = () => {
        if (navBar.value) {
            navBar.value.navigationHome = navigationHome;
            navBar.value.navigationTitle = title;
        }
    }

    const opusList = ref([

    ]);

    const getOpusList = () => {
        Taro.request({
            url: `${baseUrl}/recipe/getAllOpus?recipeId=${recipeId}&userId=${userId}`,
            header: {
                'content-type': 'application/json' // 默认值
            },
            success: function (res) {
                opusList.value = res.data.data;
                opusList.value.forEach(item => {
                    item.imgSrc = JSON.parse(item.imgSrc)
                });
            }
        })
    }

    // 获取外来数据
    const router = useRouter();
    const { recipeId, title, userId } = router.params;

    onMounted(() => {
        getOpusList();
        setNavBar();
    });
</script>

<style lang="scss" scoped></style>